<template>
    <div class="quiz-spread">
		<y-nav title="我的推广情况" :shareData="shareData"></y-nav>
		<div v-if="list.length">
			<div class="spread-title">
				<div class="title-order">序号</div>
				<div class="title-phone">注册手机号</div>
				<div class="title-time">注册时间</div>
				<div class="title-finish">是否完成测试</div>
			</div>
			<div class="spread-list">
				<y-spread-item v-for="(item, index) of list" :key="index" :index="index" :data="item" ></y-spread-item>
			</div>
		</div>
		<div v-else>
			<y-message :icon="noDataIcon" title="暂无数据"></y-message>
		</div>
    </div>
</template>
<script>
import noDataIcon from '@/assets/no_data.png';
import SpreadItem from './components/spread-item';
import code from './data/code.json';
import Nav from '@/components/nav';
import Message from '@/components/message';
import shareData from './data/shareData.js';
export default {
    components: {
		[SpreadItem.name]: SpreadItem,
		[Nav.name]: Nav,
		[Message.name]: Message
    },
    data() {
        return {
            list: [],
			noDataIcon,
			shareData
        }
    },
    methods: {
        async getSpreadList() {
            let params = {
				activityCode: code.activityCode,
				pageSize: 200
            }
            let res = await this.$http({
                url: '/lovelorn/v1.3/pt/activity-testing-infos/action/list-app',
                method: 'get',
                params
			});
			this.list = res.data.data;
        }
    },
    created() {
        this.getSpreadList();
    }
}
</script>
<style>
.quiz-spread{
    background: #fff;
    padding: 0 0.2rem;
	height: 100vh;
    & .spread-title{
        display: flex;
        justify-content: space-around;
        font-size: 0.28rem;
        color: #000;
        font-weight: 700;
        padding: 0.3rem 0;
        text-align: center;
        border-bottom: 0.01rem solid #eee;

        & .title-order{
            width: 0.6rem;
        }
        & .title-phone{
            width: 1.6rem;
        }
        & .title-time{
            width: 1.5rem;
        }
         & .title-finish{
            width: 1.9rem;
        }
	}
	& .message {
		padding-top: 2.5rem;
	}
}
</style>
